<!-- 用户列表页 -->
<template>
    <div>
        <!-- 卡片视图 -->
        <el-card shadow="never">
            <!-- 搜索 添加 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="searchUserinfo()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialog()">添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表区域 -->
            <div style="margin-top:15px">
                <!-- 用户列表区域 -->
                <el-table :data="userlist" border="" stripe style="width: 100%">
                    <!-- stripe: 斑马条纹
                    border：边框-->
                    <el-table-column type="index" label="#" :index="tableIndex"></el-table-column>
                    <el-table-column prop="mg_name" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="avatar" label="头像" align="center">
                        <template slot-scope="scope">
                            <el-avatar :src='scope.row.avatar'></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mg_email" label="邮箱" align="center"></el-table-column>
                    <el-table-column prop="mg_mobile" label="电话" align="center"></el-table-column>
                    <el-table-column prop="role_name" label="角色" align="center">
                        <template slot-scope="scope">
                            <el-tag size="medium">{{ scope.row.role_name }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="mg_state" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.mg_state" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="userStateChanged(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button type="primary" plain icon="el-icon-edit-outline" size="mini" @click="showEditDialog(scope.$index,scope.row)" style="margin-right:10px">编辑</el-button>
                            <el-popover :ref="scope.row.mg_id" placement="bottom">
                                <div class="el-popconfirm__main"><i class="el-popconfirm__icon el-icon-question" style="color: rgb(255, 153, 0);"></i>确定要删除该用户吗?</div>
                                <div style="text-align: center;">
                                    <el-button size="mini" type="text" @click="visibleDelCancel(scope.row.mg_id)">取消</el-button>
                                    <el-button type="primary" size="mini" @click="removeUserById(scope.row.mg_id)">确定</el-button>
                                </div>
                                <el-button slot="reference" type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页区域 -->
            <!-- <Page :pageSize="pageData.pagesize" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange" :total="total" :currentPage="pageData.pagenum"></Page> -->
            <el-pagination class="page" background="" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.pagenum" :page-sizes="[5, 10, 15]" :page-size="pageData.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </el-card>
        <!-- 添加用户的对话框 -->
        <addDialog ref="addDialog" @update="getUserList"></addDialog>
        <!-- 修改用户的对话框 -->
        <editDialog ref="editDialog" :editUserForm="editUserForm" @update="getUserList"></editDialog>
    </div>
</template>

<script>
    import addDialog from './addDialog'
    import editDialog from './editDialog'
    // import Page from "@/components/Page";
    export default {
        name: '',
        components: {
            addDialog,
            editDialog,
            // Page,
        },
        data() {
            return {
                visible: false,
                // 获取用户列表查询参数对象
                queryInfo: {
                    query: '',
                },
                pageData: {
                    // 当前页数
                    pagenum: 1,
                    // 每页显示多少数据
                    pagesize: 10,
                },
                userlist: [],
                searchUserlist: [],
                token: '',
                isBoolean: true,
                total: 0,
                editUserForm: {
                    mg_name: '',
                    mg_email: '',
                    mg_mobile: '',
                },
            }
        },
        created() {
            this.getUserList()
        },
        methods: {
            async getUserList() {
                const { data: res } = await this.$http.post(
                    '/manager_page',
                    this.pageData
                )
                if (res.status !== 200) {
                    return this.$message.error(res.message)
                }
                console.log(res)
                this.userlist = res.results
                //分页处理
                this.total = res.total
                this.pageData.pagesize = res.pagesize

                this.$message.success(res.message)
            },

            async searchUserinfo() {
                const { data: res } = await this.$http.post(
                    '/manager_search',
                    this.queryInfo
                )
                if (res.status !== 200) {
                    return this.$message.error(res.message)
                }
                console.log(res)
                this.userlist = res.results
                //分页处理
                this.total = res.results.length
                this.$message.success(res.message)
            },

            // getUserList() {
            //     this.$http.get("/manager").then((res) => {
            //         console.log(res);
            //         if (res.status !== 200) {
            //             return this.$message.error("获取用户列表失败！");
            //         }
            //         this.userlist = res.data.results;
            //         this.$message.success("获取用户列表成功！");
            //     });
            // },

            // 监听 pagesize改变的事件
            handleSizeChange(newSize) {
                // console.log(newSize);
                this.pageData.pagesize = newSize
                this.getUserList()
            },
            // 监听 页码值 改变事件
            handleCurrentChange(newSize) {
                // console.log(newSize);
                this.pageData.pagenum = newSize
                this.getUserList()
            },
            // 监听 switch开关 状态改变
            // async userStateChanged(id) {
            async userStateChanged(data) {
                console.log(data)
                const { data: res } = await this.$http.put(
                    '/manager_state/' + data.mg_id,
                    data
                )
                if (res.status !== 200) {
                    data.mg_state = !data.mg_state
                    return this.$message.error('更新用户状态失败')
                }
                this.$message.success('更新用户状态成功！')
            },
            // 添加用户弹出对话框
            addDialog() {
                this.$refs.addDialog.showDialog()
            },
            // 编辑用户信息
            showEditDialog(index, row) {
                this.$refs.editDialog.showDialog()
                this.editUserForm = Object.assign({}, row)
            },
            // 删除用户
            async removeUserById(id) {
                this.$refs[id].doClose()
                const { data: res } = await this.$http.delete('manager/' + id)
                console.log(res)
                if (res.status !== 200) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.getUserList()
            },

            //分页累加问题解决
            tableIndex(index) {
                return (
                    (this.pageData.pagenum - 1) * this.pageData.pagesize + index + 1
                )
            },
            //el-popover取消操作
            visibleDelCancel(id) {
                this.$refs[id].doClose()
            },
        },
    }
</script>

<style lang="scss" scoped>
</style>
